<template>
  <div class="ossUploadinImag2">
    <!-- action="http://47.97.79.225:9020/fileMgr/v1/oss/upload/aliyun" -->
    <el-upload
      action=""
      :class="hiddenUp ? 'img-hide' : ''"
      :http-request="requestHttp"
      multiple
      list-type="picture-card"
      :on-success="successHandle"
      :on-exceed="outInputFile"
      :file-list="updataArr"
      :limit="limit"
      :before-upload="beforeUploadHandle"
      v-loading.fullscreen.lock="fullscreenLoading"
    >
      <!-- <i class="el-icon-plus"></i> -->
      <i slot="default" class="el-icon-plus"></i>
      <div slot="file" slot-scope="{ file }">
        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
        <span class="el-upload-list__item-actions">
          <span
            class="el-upload-list__item-preview"
            @click="handlePictureCardPreview(file)"
          >
            <i class="el-icon-zoom-in"></i>
          </span>
          <span
            v-if="!disable"
            class="el-upload-list__item-delete"
            @click="handleRemove(file, updataArr)"
          >
            <i class="el-icon-delete"></i>
          </span>
        </span>
      </div>

      <div class="el-upload__tip" slot="tip" v-if="tip">{{ tip }}</div>
    </el-upload>

    <el-dialog :visible.sync="dialogVisible2" append-to-body>
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
import Vue from 'vue'
export default {
  props: {
    value: {
      type: Array,
      default: []
    },

    limit: {
      type: Number,
      default: 6
    },
    dialogVisible: {
      type: Boolean,
      default: false
    },
    clearVisible: {
      type: Boolean,
      default: false
    },
    tip: {
      type: String,
      default: null
    },
    disable: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      visible: false,
      url: '',
      num: 0,
      successNum: 0,
      updataArr: [], // 回显值
      urlUidImg: [], // 上传值
      hiddenUp: false,
      removeType: false,
      dialogImageUrl: '',
      dialogVisible2: false,
      fullscreenLoading: false
    }
  },
  watch: {
    dialogVisible(n, o) {
      if (!n) {
        this.updataArr = []
      }
    },

    value(n, o) {
      this.updataArr = []
      if (n.length > 0) {
        n.forEach(item => {
          let obj = new Object()
          obj.url = item
          this.updataArr.push(obj)
        })
      }
      this.length()
    }
  },
  mounted() {
    if (this.value) {
      this.value.forEach(item => {
        let obj = new Object()
        obj.url = item
        this.updataArr.push(obj)
      })
      this.length()
    }
  },
  methods: {
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible2 = true
    },
    handleRemove(file, fileList) {
      let newUrlArr = []
      let newArr = this.updataArr.filter(val => {
        return val.uid != file.uid
      })
      newArr.forEach(v => {
        newUrlArr.push(v.url)
      })
      // let removeArr = []
      // if (fileList.length > 0) {
      // 	if (this.urlUidImg.length > 0) {
      // 		this.urlUidImg.forEach(element => {
      // 			if (file.uid != element.uid) {
      // 				if (element.url) {
      // 					removeArr.push(element.url)
      // 				} else {
      // 					removeArr.push(element)
      // 				}
      // 			}
      // 		});
      // 	} else {
      // 		fileList.forEach(e => {
      // 			if (e.url) {
      // 				removeArr.push(e.url)
      // 			} else {
      // 				removeArr.push(e)
      // 			}

      // 		})
      // 	}

      // 	this.updataArr = fileList
      // } else {
      // 	removeArr = []
      // 	this.updataArr = []
      // }
      // this.removeType = true
      this.length()
      this.$emit('updataImg', newUrlArr)
      this.updataArr = newArr
    },

    // 上传之前
    beforeUploadHandle(file) {
      const isJPG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG && !isPNG) {
        this.$message.error('上传图片只能是 JPG /png格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
      }
      return (isJPG || isPNG) && isLt2M
      this.num++
    },
    // 随机生成文件名
    random_string(len) {
      len = len || 32
      var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz123456789'
      var maxPos = chars.length
      var pwd = ''
      for (let i = 0; i < len; i++) {
        pwd += chars.charAt(Math.floor(Math.random() * maxPos))
      }
      return pwd
    },
    requestHttp(file) {
      let formData = new FormData()
      formData.append('file', file.file)
      let config = {
        headers: {
          token: Vue.cookie.get('token'),
          'Content-Type': 'multipart/form-data'
        }
      }
      // admin/minio/upload
      this.fullscreenLoading = true
      axios
        .post(
          `${this.$config.SERVER_URL}/admin/sys/oss/upload`,
          formData,
          config
        )
        .then(obj => {
          this.fullscreenLoading = false
          if (obj.status == 200) {
            let fileUrl = obj.data.data.url
            let editorArr = []
            this.urlUidImg = this.updataArr
            this.urlUidImg.push({
              url: fileUrl,
              uid: file.file.uid
            })
            this.urlUidImg.forEach(element => {
              if (element.url) {
                editorArr.push(element.url)
              } else {
                editorArr.push(element)
              }
            })
            this.$emit('updataImg', editorArr)
            this.length()
          }
        })
    },
    outInputFile(files, fileList) {
      if (fileList.length >= this.limit) {
        this.hiddenUp = true
        this.$message.warning('最多只能上传' + this.limit + '张图片')
        return false
      } else {
        this.hiddenUp = false
      }
    },
    length() {
      if (this.updataArr.length >= this.limit) {
        this.hiddenUp = true
      } else {
        this.hiddenUp = false
      }
    },
    // 上传成功
    successHandle(response, file, fileList) {
      console.log(file, fileList)
      this.successNum++
    }
  }
}
</script>
<style lang="scss">
.ossUploadinImag2 {
  // .img-hide .el-upload--picture-card {
  //   display: none;
  // }

  .el-upload-list--picture-card .el-upload-list__item-thumbnail {
    height: 146px !important;
  }

  // .el-upload-list--picture-card .el-upload-list__item {
  //   height: 130px !important;
  //   width: auto;
  //   max-width: 690px;
  // }
}
</style>
